 <template>
  <div>
    <div class="tiltle">
      <div
        style="
          display: flex;
          align-items: center;
          height: 30px;
          margin-left: 20px;
          cursor: pointer;
        "
      >
        <i class="el-icon-arrow-left" style="width: 5vw" @click="backPage"
          >文章管理</i
        >
      </div>
      <el-input
        v-model="title"
        placeholder="请输入标题"
        style="width: 80vw"
      ></el-input>
      <el-button
        type="warning"
        plain
        style="height: 30px; width: 120px; margin-left: 20px"
        >发布文章</el-button
      >
    </div>
    <div class="container">
      <el-card class="edit">
        <el-input
          type="textarea"
          :rows="40"
          placeholder="在这里写下你的文章"
          v-model="content"
        >
        </el-input>
      </el-card>
      <!-- <div class="edit"></div> -->

      <el-card class="show">
        <div
          v-html="formattedContent"
          style="height: 85vh; overflow-y: auto"
        ></div>
      </el-card>

      <el-card class="tip">
        <h3>标题</h3>
        <div v-html="formattedTip"></div>
      </el-card>
    </div>
  </div>
</template>

 <script>
import { marked } from "marked";
import router from "@/router";
export default {
  data() {
    return {
      title: "",
      content: "",
      tip: "# # 一级标题 \n ## ## 二级标题 \n### ### 三级标题\n#### #### 四级标题\n##### ##### 五级标题\n###### ###### 六级标题\n",
    };
  },
  methods: {
    backPage() {
      this.$router.back();
    },
    saveArticle() {
      // 发送保存文章的请求到后端
      // 你可以使用axios或其他HTTP库发送请求
    },
  },
  computed: {
    formattedContent() {
      // 在这里可以使用第三方库将Markdown转换为HTML，例如marked.js
      return marked("# " + this.title + "\n" + this.content);
    },
    formattedTip() {
      // 在这里可以使用第三方库将Markdown转换为HTML，例如marked.js
      return marked(this.tip);
    },
  },
};
</script>

 <style>
/* 样式可以根据需求自定义 */
.tiltle {
  height: 10vh;
  width: 100vw;
  display: flex;
}

.container {
  height: 80vh;
  display: flex;
  align-items: center;
}

.edit {
  height: 90vh;
  width: 42vw;
}

.show {
  height: 90vh;
  width: 42vw;
}

.tip {
  height: 90vh;
  width: 16vw;
}
</style>